<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-02-15 17:58:43
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\layout\uiFlexbox\uiFlexbox.vue
 * CIMC-V2
-->
<template>
  <div class="flex flex-col w-full h-full">
    <!-- <div class="radio flex justify-end">
      <span class="mr-4">今日</span>
      <span>本月</span>
    </div> -->
    <div class="box flex">
      <div class="left flex justify-center items-center flex-col">
        <span>在</span>
        <span>途</span>
        <span>价</span>
        <span>值</span>
      </div>
      <div class="right flex flex-col justify-center ml-5">
        <div class="today mb-3" style="color: #00ffe4">{{ obj.TRVALUE }}</div>
        <!-- <div class="yestoday" style="color: #fff">昨日：3772</div> -->
      </div>
    </div>
    <div class="box flex">
      <div class="left flex justify-center items-center flex-col">
        <span>在</span>
        <span>途</span>
        <span>订</span>
        <span>单</span>
      </div>
      <div class="right flex flex-col justify-center ml-5">
        <div class="today mb-3" style="color: #68befd">{{ obj.TRORDER }}</div>
        <!-- <div class="yestoday" style="color: #fff">昨日：3772</div> -->
      </div>
    </div>
    <div class="box flex">
      <div class="left flex justify-center items-center flex-col">
        <span>在</span>
        <span>途</span>
        <span>件</span>
        <span>数</span>
      </div>
      <div class="right flex flex-col justify-center ml-5">
        <div class="today mb-3" style="color: #fed62f">{{ obj.TRQTY }}</div>
        <!-- <div class="yestoday" style="color: #fff">昨日：3772</div> -->
      </div>
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ChartMixin, ConditionMixin } from '@ve/mixin'
  import cloneDeep from 'lodash/cloneDeep'
  export default defineComponent({
    name: 'InfoList',
    mixins: [UiMixin, RefsInjectMixin, ChartMixin, ConditionMixin],
    data() {
      return {
        inter: null,
        infoComponent: {},
        obj: {},
      }
    },
    mounted() {
      this.infoComponent = cloneDeep(this.info)
      this.inter && clearInterval(this.inter)
      this.getData()
      this.inter = setInterval(() => {
        this.getData()
      }, 30000)
    },
    deactivated() {
      this.inter && clearInterval(this.inter)
    },
    beforeUnmount() {
      this.inter && clearInterval(this.inter)
    },
    methods: {
      getData() {
        this.$request(
          {
            api: '/wms/wms-web',
            method: 'wms.kanban.routeCount.query',
            getDataKey: 'wms.kanban.routeCount.query',
            loopRequest: false,
            loopTime: 3000,
            nameKey: '',
            valueKey: '',
            busList: [],
            dataObj: {},
            isJson: false,
            data: [
              { key: '#LIMIT#', value: '1' },
              { key: '#PAGE_SIZE#', value: '10' },
            ],
            resList: [],
          },
          (res) => {
            console.log(res, 'res-------------')
            this.obj = res[0]
            // this.CONFIG_VALUE = 3
          }
        )
      },
    },
  })
</script>
<style>
  .infoList {
    width: 100%;
    height: 100%;
  }
</style>
<style lang="scss" scoped>
  .box {
    flex: 1;
    width: 100%;
    .left {
      width: 80px;
      background-image: url(./u231.png);
      background-size: contain;
      background-repeat: no-repeat;
      color: #fff;
      background-position: center;
      font-size: 16px;
      span {
        margin: 0 0 2px;
      }
    }
    .right {
      flex: 1;
      .today {
        font-size: 30px;
        font-weight: bold;
        letter-spacing: 1px;
      }
      .yestoday {
        font-size: 15px;
        letter-spacing: 1px;
      }
    }
  }
  .radio {
    span {
      display: block;
      text-align: center;
      line-height: 27px;
      width: 60px;
      font-size: 14px;
      height: 27px;
      color: rgba(123, 188, 239, 0.8);
      border: 1px solid rgba(123, 188, 239, 0.8);
      border-radius: 8px;
    }
  }
</style>
